<!--
* @author wn
* @date 2022/04/18 14:05:36
* @description: 头部组件
!-->
<template>
	<header class="app-header">
		<div class="container">
			<!-- logo -->
			<h1 class="logo">
				<router-link to="/">小兔鲜</router-link>
			</h1>
			<!-- 头部导航组件 -->
			<app-header-nav />
			<!-- 搜索 -->
			<div class="search">
				<i class="iconfont icon-search"></i>
				<input type="text" placeholder="搜一搜" />
			</div>
			<!-- 头部购物车组件 -->
			<app-header-cart />
		</div>
	</header>
</template>
<script>
import AppHeaderNav from '@/components/AppHeaderNav'
import AppHeaderCart from '@/components/AppHeaderCart'
export default {
	name: 'AppHeader',
	components: {
		AppHeaderNav,
		AppHeaderCart,
	},
}
</script>
<style scoped lang="less">
.app-header {
	background-color: #fff;
	.container {
		display: flex;
		align-items: center;
		.logo {
			width: 200px;
			a {
				display: block;
				width: 100%;
				height: 132px;
				text-indent: -9999px;
				background: url(@/assets/images/logo.png) no-repeat center 18px /
					contain;
			}
		}
		.search {
			width: 170px;
			height: 32px;
			position: relative;
			border-bottom: 1px solid #e7e7e7;
			line-height: 32px;
			.icon-search {
				font-size: 18px;
				margin-left: 5px;
			}
			input {
				width: 140px;
				padding-left: 8px;
				color: #666;
			}
		}
	}
}
</style>
